<!--
 * @ Author: 反转
 * @ Create Time: 2021-04-06 09:02:08
 * @ Modified by: 反转
 * @ Modified time: 2021-04-08 16:06:21
 * @ Description: 瀑布流组件
 -->
 <template>
  <div class="dynamic" id="dynamic">
    <!-- 使用下拉刷新 -->
    <van-pull-refresh
      v-model="refreshing"
      :pulling-text="pullingText"
      :loosing-text="loosingText"
      :loading-text="downText"
      :success-text="successText"
      :pull-distance="pullDistance"
      :disabled="downDisabled"
      @refresh="onRefresh"
    >
      <!-- 顶部插槽 -->
      <slot name="waterfall-top"></slot>
      <van-list
        v-model="loading"
        :finished="finished"
        :finished-text="finishedText"
        :loading-text="loadingText"
        :offset="offset"
        @load="onLoad"
      >
        <div
          class="waterfall"
          :style="{ minHeight: dataList.length < 6 ? '82vh' : '92vh' }"
        >
          <template v-if="AllList.leftList.length !== 0">
            <!-- 瀑布流左侧容器 -->
            <div class="fall-left" id="left">
              <div
                class="fall-list"
                v-for="(item, index) in AllList.leftList"
                :key="index"
              >
                <!-- 图片 -->
                <img
                  v-if="item[imgKey] && item[imgKey] !== ''"
                  :src="item[imgKey]"
                  @click="cardClick(item, index)"
                  :lazy-load="isLazy"
                  alt=""
                />
                <!-- 没有图片时的占位图 -->
                <div class="failed-box" v-else>
                  <img src="@/assets/images/emptyIntegral.png" alt="" />
                  <p>图片已删除</p>
                </div>
                <!-- 内容插槽 -->
                <slot name="waterfall-info" v-bind:value="item"></slot>
              </div>
            </div>
            <!-- 瀑布流右侧容器 -->
            <div class="fall-right" id="right">
              <div
                class="fall-list"
                v-for="(item, index) in AllList.rightList"
                :key="index"
              >
                <img
                  v-if="item[imgKey] && item[imgKey] !== ''"
                  :src="item[imgKey]"
                  @click="cardClick(item, index)"
                  :lazy-load="isLazy"
                  alt=""
                />
                <!-- 没有图片时的占位图 -->
                <div class="failed-box" v-else>
                  <img src="@/assets/images/emptyIntegral.png" alt="" />
                  <p>图片已删除</p>
                </div>
                <!-- 内容插槽 -->
                <slot name="waterfall-info" v-bind:value="item"></slot>
              </div>
            </div>
          </template>
          <!-- 当数据未空时 -->
          <NotList v-if="AllList.leftList.length == 0" />
        </div>
      </van-list>
      <!-- 占位元素，当列表数据低于6条时显示 -->
      <div class="place" v-if="dataList.length < 6"></div>
    </van-pull-refresh>
  </div>
</template>
<script>
import NotList from "./NotList.vue";
export default {
  components: {
    NotList
  },
  data() {
    return {
      refreshing: false,
      loading: false,
      finished: false
    };
  },
  props: {
    dataList: {
      type: Array
    },
    finishedText: {
      type: String,
      default: "没有更多了..."
    },
    isLazy: {
      type: Boolean,
      default: true
    },
    imgKey: {
      type: String,
      default: "imgurl"
    },
    loadingText: {
      type: String,
      default: "加载中..."
    },
    offset: {
      type: Number,
      default: 300
    },
    pullingText: {
      type: String,
      default: "下拉刷新..."
    },
    loosingText: {
      type: String,
      default: "松开进行刷新.."
    },
    downText: {
      type: String,
      default: "加载中..."
    },
    successText: {
      type: String,
      default: "刷新成功"
    },
    pullDistance: {
      type: Number,
      default: 50
    },
    downDisabled: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    AllList: {
      /**
       * 对数据进行奇偶数拆分
       */
      get() {
        let obj = {};
        obj.leftList = [];
        obj.rightList = [];
        for (let index = 0; index < this.dataList.length; index++) {
          const e = this.dataList[index];
          if (index % 2 == 0) {
            obj.leftList.push(e);
          } else {
            obj.rightList.push(e);
          }
        }
        return obj;
      },
      set() {}
    }
  },
  watch: {
    /**
     * 监听是否有新数据
     * 如果有新数据 去除loading
     */
    dataList(newValue) {
      if (newValue.length == 0) {
        setTimeout(() => {
          this.loading = false;
        }, 500);
      } else {
        this.loading = false;
      }
    }
  },
  methods: {
    /**加载中*/
    onLoad() {
      //   传递上拉加载事件
      this.$emit("onLoad");
    },
    /**下拉刷新 */
    onRefresh() {
      //   传递刷新事件
      this.$emit("onRefresh");
    },
    /**
     * 手动取消刷新
     */
    hideRefreshing() {
      this.refreshing = false;
    },
    /**
     * 没有更多了
     */
    notMore() {
      this.finished = true;
      /**
       * 判断是否到达底部
       * 并且计算左右两边的高度
       * 如果高度的差值超过300
       * 取长的一边的值给短边
       * 此处使用浅拷贝原理 动态改变了数组
       */
      let left = document.getElementById("left");
      let right = document.getElementById("right");
      let AllList = this.AllList
      if (left.clientHeight - right.clientHeight > 310) {
        let list = AllList.leftList.pop();
        AllList.rightList.push(list);
      }else if(right.clientHeight - left.clientHeight > 310){
        let list = AllList.rightList.pop();
        AllList.leftList.push(list);
      }
    },
    /**
     * 重置刷新数据 用户tab切换
     */
    resetMore() {
      this.loading = true;
      this.finished = false;
    },
    /**
     * 列表数据被点击时传递事件
     */
    cardClick(value, index) {
      this.$emit("cardClick", value, index);
    },
    /**
     * 回到顶部
     */
    goTop(){
      document.getElementById('dynamic').scrollTop = 0
    }
  }
};
</script>
<style lang="scss" scoped>
body {
  margin: 0;
  padding: 0;
}
.dynamic {
  width: 100%;
  height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch !important;
  &::-webkit-scrollbar {
    display: none;
  }
}
@keyframes show-card {
  0% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(1);
  }
}
.waterfall {
  width: 98vw;
  min-height: 82vh;
  padding: 0.133333rem 0;
  box-sizing: border-box;
  margin: 0 auto;
  overflow: hidden;
  -webkit-overflow-scrolling: touch !important;
  .fall-left,
  .fall-right {
    max-width: 50%;
    min-width: 50%;
    overflow: hidden;
  }
  .fall-left {
    float: left;
  }
  .fall-right {
    float: right;
  }
}
.failed-box {
  width: 100%;
  height: 3.2rem;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  img {
    min-height: 1.6rem !important;
    max-height: 1.6rem !important;
    width: auto !important;
    display: block;
  }
  p {
    text-align: center;
    font-size: 0.293333rem !important;
    color: #ddd;
    margin-top: 0.2rem;
  }
}
.fall-list {
  min-width: 96%;
  max-width: 96%;
  margin: 0 auto;
  margin-bottom: 0.133333rem;
  overflow: hidden;
  background: #fff;
  border-radius: 0.133333rem;
  box-shadow: 0px 0px 0.133333rem #ccc;
  position: relative;
  animation: show-card 0.5s;
  transition: left 0.5s, top 0.5s;
  transition-delay: 0.1s;
  img {
    min-height: 3.2rem;
    max-height: 6.4rem;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    display: block;
  }
  p {
    font-size: 0.4rem;
    text-align: center;
  }
}
.place {
  height: 9.5vh;
  width: 100%;
}
</style>